﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/home.css"/>
</head>
<body> 
    <!--页眉-->
    <header id="header">
       <div id="logo">
            <a href="#">
                <img src="images/gameLogo.png" />
            </a>
       </div>
       <div class="home-index">
           <a href="#">首页</a>
       </div>
       <div id="menu">
           <ul>
               <li><a href="#">注册</a></li>
               <li><a href="#">登录</a></li>
               <li><a href="#">帮助</a></li>
               <li><a href="#">更多</a></li>
           </ul>
       </div>
    </header>
    <!--内容区域-->
    <div id="content">
        <!--游戏内容区域-->
        <div class="content-game">
            <div class="game-nav">
                <!--导航菜单-->
                <div class="nav-menu">
                    <ul>
                        <li><a href="#"><img src="images/sub-2.gif" />征战四方</a></li>
                        <li><a href="#"><img src="images/sub-3.gif" />龙将</a></li>
                        <li><a href="#"><img src="images/sub-4.gif" />弹弹堂</a></li>
                        <li><a href="#"><img src="images/sub-5.gif" />凡人修真2</a></li>
                        <li><a href="#"><img src="images/sub-6.gif" />一骑当先</a></li>
                        <li><a href="#"><img src="images/sub-7.gif" />宫廷计</a></li>
                        <li><a href="#"><img src="images/sub-8.gif" />神仙道</a></li>
                    </ul>
                </div>
                <!--游戏广告-->
                <div class="nav-adv">
                    <a href="#"><img src="images/xdtgg_frxz2_44.jpg" /></a>
                    <ul>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                    </ul>
                </div>
            </div>
            <div class="game-box">
                <div class="game-title">
                    <div class="title">全部游戏</div>
                    <ul>
                        <li><a href="#">战争策略</a></li>
                        <li>|</li>
                        <li><a href="#">体育经营</a></li>
                        <li>|</li>
                        <li><a href="#">社交游戏</a></li>
                    </ul>
                </div>
                <div class="game-list">
                    <div class="game">
                        <div class="pic">
                            <a href="#"><img src="images/img-4.jpg"/></a>
                        </div>
                        <div class="desc">
                            <p>三国题材横版RPG网游，丰富的武将系统</p>
                            <p>类型：角色扮演</p>
                            <p>游戏人气：<span>470921</span></p>
                            <p><a class="btn" href="#">选服</a><a class="btn btn-active" href="#">进入游戏</a></p>
                        </div>
                    </div>
                    <div class="game">
                        <div class="pic">
                            <a href="#"><img src="images/img-5.jpg" /></a>
                        </div>
                        <div class="desc">
                            <p>三国题材横版RPG网游，丰富的武将系统</p>
                            <p>类型：角色扮演</p>
                            <p>游戏人气：<span>470921</span></p>
                            <p><a class="btn" href="#">选服</a><a class="btn btn-active" href="#">进入游戏</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="game-box">
                <div class="game-title">
                    <div class="title">全部游戏</div>
                </div>
                <div class="game-list">
                    <table>
                        <tr>
                            <td>
                                <div class="item">
                                    <img src="images/img-6.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                            <td>
                                <div class="item">
                                    <img src="images/img-7.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                            <td>
                                <div class="item">
                                    <img src="images/img-13.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                            <td>
                                <div class="item">
                                    <img src="images/img-8.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="item">
                                    <img src="images/img-9.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                            <td>
                                <div class="item">
                                    <img src="images/img-10.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                            <td>
                                <div class="item">
                                    <img src="images/img-11.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                            <td>
                                <div class="item">
                                    <img src="images/img-12.jpg" />
                                    <p>游戏人气:1715455</p>
                                    <p>游戏状态:<span>22区开启</span></p>
                                    <p><a href="#" class="btn">选服</a><a href="#" class="btn btn-aaa">进入游戏</a></p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
        <!--右侧边栏区域-->
        <div class="centent-aside">
            <div class="aside-box">
                <h1>开心网用户登录</h1>
                <form class="login-from">
                    <ul>
                        <li>账号<input type="text" placeholder="字母或数字的六位字符" /></li>
                        <li>密码<input type="text" placeholder="字母或数字的六位字符" /></li>
                        <li class="center"><input class="btn-login" type="submit" value=""/></li>
                        <li class="center"><a href="#">立即注册</a><a href="#">忘记密码</a></li>
                    </ul>
                </form>
            </div>
            <div class="aside-box">
                <div class="game-title">
                    <div class="title">新闻公告</div>
                </div>
                <ul class="news">
                    <li><a href="#">[征战四方] 开心首服·黄巾之乱</a></li>
                    <li><a href="#">[龙将] 火爆8服·八门金</a></li>
                    <li><a href="#">[弹弹堂] 41服开启·万人竞技</a></li>
                    <li><a href="#">[凡人修真2] 03月03日·四海帝王</a></li>
                    <li><a href="#">[一骑当先] 开心2服上线送黄金</a></li>
                    <li><a href="#">[宫廷计] 03月06日·西施秘史</a></li>
                    <li class="no-border"><a href="#">[凡人修真2] 03月03日·四海帝王</a></li>
                </ul>
            </div>
            <div class="link">
                <a href="#"><img src="images/ad1.jpg" alt=""/></a>
                <a href="#"><img src="images/ad2.jpg" alt=""/></a>
            </div>
            <div class="aside-box">
                <div class="game-title">
                    <div class="title">游戏视频</div>
                </div>
                <ul class="video">
                    <li>
                        <img src="images/img-1.jpg"/>
                        <a href="#">《航海之王》麻辣炫酷反超越，英雄时尚大变身</a>
                    </li>
                    <li>
                        <img src="images/img-2.jpg" />
                        <a href="#">《航海之王》麻辣炫酷反超越，英雄时尚大变身</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--页脚-->
    <footer id="footer">
        <a href="#">关于我们</a>
        <a href="#">手机版</a>
        <a href="#">开放平台</a>
        <a href="#">自助广告</a>
        <a href="#">招聘</a>
        <a href="#">客服</a>
        <a href="#">帮助</a>
        @2017开心网 文网文[2009]157号 京ICP证080482号 京公安网备110000000003号 未成年人家长监护
    </footer>
</body>
</html>
